<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title th:text="#{i18n.text_1}"></title>
	<head th:replace="head"/>
	<link rel="stylesheet" th:href="@{/css/index.css?v=20180404}"/>
	<style type="text/css">
		.dropdown-menu {
	    	background-color: rgba(0,0,0,.075);
	    }
	    h2{
	        font-size: 25px;
            font-weight: 100;
	    }
	</style>
</head>
<body class="landing-page">
<header class="header">
	<div class="container">
		<div class="row" style="position: relative">
			<div class="logo">
				<div class="logo-inner">
					<a href="/" class="text-hide logo-link"></a>
				</div>
			</div>
			<nav class="nav" style="float:right">
				<ul>
					<li class="nav-item ">
						<a th:href="@{/stat/BTC}" th:text="#{i18n.text_3}">
						</a>
					</li>
					<li class="nav-item ">
						<a th:href="@{/help/help}" th:text="#{i18n.text_5}">
						</a>
					</li>
					<li class="nav-item ">
						<div class="lang">
		                   <div class="lang-active">
		                       <a href="javascript:" data-toggle="dropdown">
		                           <span class="langText">简体中文</span>
			                       <span class="caret"></span>
		                       </a>
		                       <ul class="dropdown-menu lang-dropdown locale">
		                            <li class="lang-option ">
		                                    <a name="en_US">English</a>
		                                </li>
		                            <li class="lang-option">
		                                    <a name="zh_CN">简体中文</a>
		                                </li>
		                        </ul>
		                   </div>
		               	</div>
					</li>
					
                
				</ul>
			</nav>


		</div>
	</div>
</header>
<div class="main-body index">

	<div class="hero hero1">
		<div class="container">

			<div class="row hero-container">
				<div class="highlight">
					<h1 th:text="#{i18n.text_209}"></h1>
					<p><span class="fee"></span></p>
					<h2 class="link-fpps" th:text="#{i18n.text_210}"></h2>
					<p></p>
				</div>

				<div class="login-box">
					<div class="login-box-loading" style="display: none;"></div>
					<div class="login-box-links" style="">
						<a th:if="${!isLogin}" class="btn-login login"
						   th:href="@{/login}" th:text="#{i18n.text_6}"></a>
					   <a th:if="${isLogin}" class="btn-login login"
						   th:href="@{/home/user}" th:text="#{i18n.text_4}"></a>
						<a class="btn-login register"
						   th:href="@{/register}" th:text="#{i18n.text_211}"></a>
					</div>
				</div>
				
				<!-- 轮播图 -->
				<div class="news-slide">
					<div id="newsPanel" class="carousel slide" data-ride="carousel" data-interval="4000">
						<ol class="carousel-indicators">
							<li data-target="#newsPanel" class="active" data-slide-to="0">
							</li>
							<li data-target="#newsPanel" data-slide-to="1" class="">
							</li>
						</ol>
						<div class="carousel-inner">
							<div class="item active">
								<a th:href="@{/help/help#/akgg}" th:text="#{i18n.text_212}"></a>

								<span>2018-2-10 14:00:00</span>
							</div>
							 <div class="item">
								<a th:href="@{/help/help#/akfl}" th:text="#{i18n.text_213}"></a>

								<span>2018-2-10 14:30:00</span>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<div class="hash">

		<div class="container">
			<div class="row">
				<div class="panel panel-bm hashRate" style="margin-top: -50px">
					<div class="panel-heading">
						<div class="panel-heading-title">
							<div class="col-xs-3 text-left">
								<b th:text="#{i18n.text_214}"></b>
							</div>
							<div class="col-xs-5 text-left">
								<span class="v" id="speedBTC">0.00</span>
								<span class="k">PH/s</span>
								<span class="k">|</span>
								<span class="v" id="actice_BTC" th:text="${actice_BTC}?:0"></span>
								<span class="k" style="margin-right: 40px" th:text="#{i18n.text_215}"></span>
							</div>
							<div class="col-xs-4 text-left">
								<span class="k" th:text="#{i18n.text_216}"></span>
								<span class="v" id="block_count_BTC" th:text="${block_count_BTC}?:0"></span>
								<span class="k" th:text="#{i18n.text_217}"></span>
								<span class="v" id="block_earn_BTC" th:text="${block_earn_BTC}?:0"></span>
								<span class="k">BTC</span>
							</div>
						</div>
					</div>
					<div class="panel-body">
						<div id="chartBtc">

						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<div class="row">
				<div class="panel panel-bm hashRate" style="margin-bottom: 0px;margin-top: 15px;">
					<div class="panel-heading">
						<div class="panel-heading-title">
							<div class="col-xs-3 text-left">
								<b th:text="#{i18n.text_231}"></b>
							</div>
							<div class="col-xs-5 text-left">
								<span class="v" id="speedBCH">0.00</span>
								<span class="k">PH/s</span>
								<span class="k">|</span>
								<span class="v" id="actice_BCH" th:text="${actice_BCH}?:0"></span>
								<span class="k" style="margin-right: 40px" th:text="#{i18n.text_215}"></span>
							</div>
							<div class="col-xs-4 text-left">
								<span class="k" th:text="#{i18n.text_216}"></span>
								<span class="v" id="block_count_BCH" th:text="${block_count_BCH}?:0"></span>
								<span class="k" th:text="#{i18n.text_217}"></span>
								<span class="v" id="block_earn_BCH" th:text="${block_earn_BCH}?:0"></span>
								<span class="k">BCH</span>
							</div>
						</div>
					</div>
					<div class="panel-body">
						<div id="chartBch"></div>
					</div>
				</div>
			</div>
		</div>

	</div>


	 <div class="leader-technology">
		<div class="container">
			<div class="row">
				<div class="panel-body">
					<p th:text="#{i18n.text_218}"></p>
					<ul id="leader-ul">
						<li>
							<div class="icon icon-01 pt-page-moveFromBottomFade pt-page-delay300"></div>
							<span th:utext="#{i18n.text_226}"></span>
						</li>
						<li>
							<div class="icon icon-02 pt-page-moveFromBottomFade pt-page-delay400"></div>
							<span th:text="#{i18n.text_227}"></span>
						</li>
						<li>
							<div class="icon icon-03 pt-page-moveFromBottomFade pt-page-delay500"></div>
							<span th:text="#{i18n.text_228}"></span>
						</li>
						<li>
							<div class="icon icon-04 pt-page-moveFromBottomFade pt-page-delay600"></div>
							<span th:text="#{i18n.text_229}"></span>
						</li>
						<li>
							<div class="icon icon-05 pt-page-moveFromBottomFade pt-page-delay700"></div>
							<span th:text="#{i18n.text_223}"></span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>


</div>

<footer th:replace="footer"/>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	$(function () {
		var unit = 'PH/s';
		var timeText = [[#{i18n.text_89}]]+"：";
		var speedStr = [[#{i18n.text_37}]];
		var speedText = speedStr+"：";
		init();
		setInterval(() => {
			init();
			$.post("/stat/poolData/index",function(data){
				$("#actice_BTC").text(data.actice_BTC);
				$("#block_count_BTC").text(data.block_count_BTC);
				$("#block_earn_BTC").text(data.block_earn_BTC);
				$("#actice_BCH").text(data.actice_BCH);
				$("#block_count_BCH").text(data.block_count_BCH);
				$("#block_earn_BCH").text(data.block_earn_BCH);
				
			},'json');
		}, 1000*60*5);
		
		function init(){
			$.post("/stat/poolData/BTC",function(data){
				$("#speedBTC").text(data.Hs[data.Hs.length-1][1]);
				gloabChart(data,'chartBtc');
			});
			$.post("/stat/poolData/BCH",function(data){
				$("#speedBCH").text(data.Hs[data.Hs.length-1][1]);
				gloabChart(data,'chartBch');
			});
		}

		function gloabChart(poolData,id) {
			var seriesdata = doSeriesData(poolData);
			var chartEle = $("#"+id)[0];
			var myChart = echarts.init(chartEle);
			//var myChart = echarts.init(chartEle);
			//var chartEle = $("#chartBtc")[0];

			var option = {
				grid: {
					left: '2%',
					right: '7%',
					bottom: '4%',
					top: '5%',
					containLabel: true
				},
				color: ['#589ed6', '#6ea7d4', '#c23531', '#2f4554', '#61a0a8', '#d48265'],
				tooltip: [{
					trigger: 'axis',
					axisPointer:{
						type: 'line',
						lineStyle: {
							color: '#3574da',
							width: 1,
							type: 'solid'
						},
					},
					formatter: function (params) {
						var len = params.length;

						var nm = params[0].name;
						var str = '';//"<b style='color:#fff'>Pool Hashrate</b></br>";
						str += timeText + nm + "<br/>";

						for (var i = 0; i < len; i++) {
							if (nm != params[i].name) {
								str += nm + "<br/>";
								//str += params[i].seriesName+':'+params[i].data;
								str += speedText + params[i].data;
								str += unit + '<br/>';
							} else {
								str += speedText + params[i].data;
								str += unit + '<br/>';
							}
							nm = params[i].name;
						}
						return str;
					}
				}],
				legend: {
					show: false,
					data: ['Pool Hashrate'],
					textStyle: {
						color: '#fff'
					},

				},
				toolbox: {
					show: false
				},
				calculable: true,
				xAxis: doXaiseData(seriesdata),
				yAxis: [
					{
						name: speedStr+'（'+unit+'）',
						type: 'value',
						nameTextStyle: {color: '#666'},
						axisLabel: {
							textStyle: {
								color: '#666'
							}
						},
						axisTick: {
							show: true,
							lineStyle: {
								color: '#aaa',
								width: 1,
								type: 'solid'
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#aaa',
								width: 1,
								type: 'solid'
							}
						},
						splitArea: {
							show: true,
							areaStyle:{
								color: [
									'rgba(0,0,0,0)',
									'rgba(250,250,250,0.9)'
								]
							}
						},
						splitLine: {
							show: false

						}
					}
				],
				series: seriesdata.series
			};

			myChart.setOption(option);

		}

		function doXaiseData(seriesdata) {
			var rtnData = [
				{
					name: 'UTC+0:00',
					type: 'category',
					boundaryGap: false,
					axisLabel: {
						interval: 'auto',
						rotate: 0,
						textStyle: {
							color: '#666'
						},
						formatter: function (value) {
							return (value.substring(10));
						}
					},
					axisTick: {
						show: true,
						lineStyle: {
							color: '#aaa',
							width: 1,
							type: 'solid'
						}
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#aaa',
							width: 1,
							type: 'solid'
						}
					},
					splitLine: {
						show: false
					},
					data: [],
					dataHours: []
				}
			]
			if (seriesdata.series.length > 0) {
				var timeArr = seriesdata.series[0].time;
				var timeMax = getMax(timeArr);
				var timeMin = getMin(timeArr);
				//console.log(timetodate(timeMax, "yyyy-MM-dd,hh:mm:ss"));

				if (timeArr) {
					var len = timeArr.length;
					if (len > 10) {
						rtnData[0].axisLabel.interval = 2;
					}
					for (var i = 0; i < len; i++) {
						var time = ""+timeArr[i];
						time = time.substring(0,4)+"-"+time.substring(4,6)+"-"+time.substring(6,8)+" "+time.substring(8,10)+":00";
						rtnData[0].data.push(time);
					}
				}
			}
			return rtnData;
		};


		function doSeriesData(data) {
			var rtnData = {
				series: [],
				tooltip: '',
			}
			var dd = {};

			$.each(data, function (i, v) {
				dd = {
					name: i,
					type: 'line',
					smooth: true,
					itemStyle: {
						normal: {
							areaStyle: {
								type: 'default',
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#8caee5'
								}, {
									offset: 1,
									color: '#ffffff'
								}])
							}
						}
					},
					//areaStyle: {show: false},
					symbolSize: 7,
					time: doVData(v).time,
					data: doVData(v).data
				}
				rtnData['series'].push(dd);
			});
			return rtnData;
		}

		function doVData(vData) {
			var rtnData = {
				"time": [],
				"data": []
			};
			$.each(vData, function (i, v) {
				rtnData.time.push(v[0]);
				rtnData.data.push(v[1]);
			});
			return rtnData;
		};

		function getMax(data) {
			Array.prototype.max = function () {
				return Math.max.apply({}, this)
			}
			return data.max();
		};

		function getMin(data) {
			Array.prototype.min = function () {
				return Math.min.apply({}, this)
			}
			return data.min();
		};

		function timetodate(tim, dat) {
			Date.prototype.pattern = function (fmt) {
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours() == 0 ? 24 : this.getHours(),
					"H+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				var week = {
					"0": "\u65e5",
					"1": "\u4e00",
					"2": "\u4e8c",
					"3": "\u4e09",
					"4": "\u56db",
					"5": "\u4e94",
					"6": "\u516d"
				};

				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				}

				if (/(E+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" : "\u5468") : "") + week[this.getDay() + ""]);
				}

				for (var k in o) {
					if (new RegExp("(" + k + ")").test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
					}
				}
				return fmt;
			}
			// return  new Date(parseInt(tim)*1000).pattern(dat);//"yyyy/MM/dd,hh,mm,ss"
			return new Date(parseInt(tim)).pattern(dat);//"yyyy/MM/dd,hh,mm,ss"
		}

	});
/*]]>*/
</script>
</body>
</html>